<template>
  <div class="container">
    <div class="background-image"></div>
    <div class="content">
      <div class="pet-profile">
        <el-form :model="pet" label-width="120px">
          <el-form-item label="论坛标题">
            <el-input v-model="article.title"></el-input>
          </el-form-item>
          <el-form-item label="论坛简介">
            <el-input v-model="article.summary" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="论坛内容">
            <!-- <el-input v-model="article.content"></el-input> -->


            <div style="border: 1px solid #ccc;border-radius: 3px;">
              <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editor"
              :defaultConfig="toolbarConfig"
              :mode="mode"
              />
              <Editor
                  style="height: 300px; overflow-y: hidden;"
                  v-model="article.content"
                  :defaultConfig="editorConfig"
                  :mode="mode"
                  @onCreated="onCreated"
              />
            </div>


          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveArt">确 定 发 布</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import jwtDecode from 'jwt-decode';

import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
  name: 'CreateProfile',
  components: { Editor, Toolbar},
  data() {
    return {
      pet: {
        id: null, // 确保在编辑时能够保存ID
        ownerId: null,
        name: '',
        type: '',
        likes: '',
        gender: '',
        birthdate: '',
        details: ''
      },

      // 表单参数
      article: {
        id:null,
        authId:null,
        title:null,
        summary:null,
        content:null,
      },

      //wangeditor
      editor: null,
      toolbarConfig: { 
          
      },
      editorConfig: { placeholder: '开始你的表演...' },
      mode: 'default', // or 'simple'

    };
  },
  created() {
    const token = localStorage.getItem('token');
    if (token) {
      const decoded = jwtDecode(token);
      this.article.authId = decoded.userId; // 从JWT中获取用户ID
    }
    const id = this.$route.query.id;
    if (id) {
      this.fetchPetDetails(id);
    }
  },
  methods: {
    onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },


    fetchPetDetails(id) {
      axios.get(`/api/article/${id}`, {
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        }
      })
      .then(response => {
        this.article = response.data[0];

        console.log(this.article)
        console.log('=================================-=-=-=')
      })
      .catch(error => {
        this.$message.error('获取宠物详情失败');
        console.error("获取宠物详情失败:", error);
      });
    },


    saveArt() {
      const url = this.article.id ? '/api/article/edit' : '/api/article/add';
      const method = this.article.id ? 'put' : 'post';
      axios({
        method: method,
        url: url,
        data: this.article,
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        }
      })
      .then(response => {
        this.$message.success('宠物档案保存成功');

        this.$router.push('/article');  
      })
      .catch(error => {
        this.$message.error('保存失败，请重试');
        console.error(error);
      });
    }




  }
};
</script>

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #000; /* 备用背景颜色 */
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/background.jpg'); /* 使用相对路径引入图片 */
  background-size: cover;
  background-position: center;
  opacity: 0.8; /* 根据需要调整透明度 */
}

.content {
  position: relative;
  z-index: 1;
  width:80%; /* 确保内容宽度与容器一致 */
  min-height: 500px;
  /* margin-top: -80px; */
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  background: rgba(255, 255, 255, 0.9); /* 设置背景颜色和透明度 */
  border-radius: 8px; /* 设置圆角 */
}

.pet-profile {
  width: 100%;
}
</style>
